<template>
    <div class="embroidery" :class='{ scrolling: scrolling, loading: init_loading, "animation-none": none_animation }'
         :style="`backgroundColor: rgb(${bg_color},${bg_color},${bg_color})`" :scrollY="scrollY">
        <component v-for="(item) in componentOption" :key="item.name" :is="item.name" :scroll="item.scroll"
                   :rate="item.rate" :cur_scroll="item.cur_scroll" :screen_height="screenHeight" :range="item.range"
                   :min="item.min" :max="item.max" :scale="item.scale" @setBackground="setBackground"
                   :class="{ 'even-none': getEvenNone(item), 'animation-none': none_animation }">
        </component>
    </div>
</template>
<script>
import { EMBROIDERY } from "@/utils/SeoConfig";
const componentOption = {
    "embroidery-custom": { name: 'EmbroideryDocCustom' },
    "embroidery-design": { name: 'EmbroideryDocDesign' },
    "embroidery-colors": { name: 'EmbroideryDocColors', scaleOption: { width: 1700, height: 874 } },
    "embroidery-area": { name: 'EmbroideryDocArea', },
    "embroidery-freedom": { name: 'EmbroideryDocFreedom' },
    "embroidery-meets-dtg": { name: 'EmbroideryDocMeetsDtg' },
    "embroidery-explore": { name: 'EmbroideryDocExplore' },
    "embroidery-craftsmanship": { name: 'EmbroideryDocCraftsmanship' },
    "embroidery-pricing": { name: 'EmbroideryDocPricing' },
    "embroidery-FAQs": { name: 'EmbroideryDocFAQs' }
};
// 需要计算scroll的添加到这里
const trendsComponents = {
    "embroidery-custom": { name: 'EmbroideryDocCustom' },
    "embroidery-design": { name: 'EmbroideryDocDesign' },
    "embroidery-colors": { name: 'EmbroideryDocColors' },
    "embroidery-area": { name: 'EmbroideryDocArea' },
    "embroidery-freedom": { name: 'EmbroideryDocFreedom' },
    "embroidery-meets-dtg": { name: 'EmbroideryDocMeetsDtg' },
    "embroidery-craftsmanship": { name: 'EmbroideryDocCraftsmanship' },
}

export default {
    name: "DocumentEmbroidery",
    head () {
        return {
            title: EMBROIDERY.title,
            meta: [
                { name: "keywords", content: EMBROIDERY.keywords },
                { name: "description", content: EMBROIDERY.description },
            ],
        };
    },
    data () {
        return {
            componentOption,
            trendsComponents,
            scheduledAnimationFrame: false,
            scrollY: 0,
            scrollTimer: null,
            scrolling: false,
            screenWidth: 0,
            screenOldHeight: 0,
            screenHeight: 0,
            init_loading: true,
            bg_color: 255,
            none_animation: false,
        }
    },
    methods: {
        getEvenNone (item) {
            return this.none_animation ? false : item.rate == 1 || item.rate == 0 && item.min != 0;
        },
        getSectionScrollInfo () {
            const scrollY = document.documentElement.scrollTop || document.body.scrollTop;
            const margin = this.screenHeight;// 阈值
            for (const key in this.trendsComponents) {
                const section = this.componentOption[key];
                const { min, max } = section;
                if (scrollY >= min - margin && scrollY < max + margin) {
                    const cur_scroll = scrollY - (min - margin); // 触发阈值的滚动值
                    const scroll = Math.min(max, Math.max(scrollY, min)) - min;
                    const rate = Number((scroll / (max - min)).toFixed(3))
                    // 批量更新
                    section.scroll = scroll;
                    section.rate = rate;
                    section.cur_scroll = cur_scroll;
                } else if (scrollY < min - margin) {
                    section.scroll = 0;
                    section.rate = 0;
                    section.cur_scroll = 0;
                } else if (scrollY > max + margin) {
                    section.scroll = max;
                    section.rate = 1;
                    section.cur_scroll = max + margin * 2;
                }
            }
        },
        handlerScroll () {
            if (this.scrollTimer) {
                clearTimeout(this.scrollTimer)
            }
            this.scrolling = true;

            this.scrollTimer = setTimeout(() => {
                this.scrolling = false
                this.scrollTimer = null
            }, 500);

        },
        readAndUpdatePage () {
            // 执行
            this.scrollY = document.documentElement.scrollTop || document.body.scrollTop;
            // 获取滚动信息
            this.getSectionScrollInfo()
        },
        onScroll (evt) {
            if (this.none_animation) return;
            this.readAndUpdatePage()
            // requestAnimationFrame(this.readAndUpdatePage);
        },
        getDomInit () {
            // 拿到每个section的Dom
            const sections = document.querySelectorAll('.embroidery section');
            // 获取在Y轴上的区域
            const resultData = { ...this.componentOption }
            sections.forEach(({ className: key, offsetTop, offsetHeight }) => {
                key = key.split(' ')?.[0] ?? ''; //取第一个
                let target = resultData[key];
                if (!target || !this.trendsComponents[key]) return;
                // 存在并且需要记录动效
                Object.assign(target, {
                    scale: 0,
                    scroll: 0,
                    rate: 0,
                    min: offsetTop,
                    max: offsetTop + offsetHeight,
                    range: offsetHeight,
                })
                // 是否要设置缩放
                if (target.scaleOption) {
                    const { width, height } = target.scaleOption;
                    target.scale = Math.floor(Math.min(this.$clamp(0, this.screenWidth / width, 1), this.$clamp(0, this.screenHeight / height, 1)) * 100) / 100
                }
            })
            this.componentOption = resultData;
            this.getSectionScrollInfo();
            setTimeout(() => {
                this.init_loading && (this.init_loading = false);
            }, 200)
        },
        debounce (fn, delay = 1000) {
            // 定时器
            if (this.debounceTimer) {
                clearTimeout(this.debounceTimer);
            }
            // 设立新定时器

            this.debounceTimer = setTimeout(() => {
                fn()
            }, delay);
        },
        changeScreenSize () {
            let { clientHeight, clientWidth } = document.documentElement
            this.screenOldHeight = this.screenHeight;
            this.screenHeight = clientHeight - 78;
            this.screenWidth = clientWidth;
            if (this.screenWidth <= 944) return this.none_animation = true;
            this.none_animation = false;
            this.debounce(() => {
                requestAnimationFrame(this.getDomInit);
            }, 300);
        },
        initPage () {
            this.changeScreenSize();
        },
        setBackground (color) {
            this.bg_color = color;
        }
    },
    mounted () {
        setTimeout(() => {
            this.init_loading = true;
            this.initPage();
        }, 500);
        window.addEventListener('scroll', this.onScroll);
        window.addEventListener("resize", this.changeScreenSize);
    },
    beforeDestroy () {
        window.removeEventListener('scroll', this.onScroll)
        window.removeEventListener("resize", this.changeScreenSize);
    },
}
</script>
<style scoped lang="scss">
.scrolling {
    * {
        pointer-events: none !important;
    }
}

.embroidery::v-deep {
    --screen-height: calc(100vh - 78px);
    position: relative;
    width: 100%;
    transition: all 0.3s;
    background-color: rgb(255, 255, 255);

    &.loading {
        opacity: 0;
    }

    &>h1 {
        position: absolute;
    }

    &>.even-none {
        pointer-events: none;
    }

    .display-none {
        display: none
    }

    section {
        display: flex;
        min-width: 1px;
        min-height: var(--screen-height);
    }

    &.animation-none {
        opacity: 1 !important;

        section {
            min-height: auto;
        }
    }
}
</style>
